<script setup lang="ts">
import { ref } from 'vue'

const list = ref([1, 2, 3, 4, 5])
const loading = ref(false)
const finished = ref(false)
const load = () => {
  setTimeout(() => {
    loading.value = false
    list.value.push(list.value.length + 1)
    if (list.value.length >= 30) {
      finished.value = true
    }
  }, 1000)
}
</script>

<template>
  <div class="app-page">
    <!-- 上拉加载 
         van-list
             v-model:loading  是否处于加载中
             finished:是否加载 完成
             finished-text:加载完成的文本内容显示
             @load='load'  滚动条距离 底部小于300时自动执行，执行过程中loading会变成true


      1:   v-model:loading    finished   finished-text
      2:  @load=()=>{
            a:调用接口
            b:loading的值为false
            c:获取到的数据要累加
            d:修改下一页接口请求的条件
            f:判断是否加载 完成，加载 完成  finished的值为true

      }

-->

    <div class="ul">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <div class="li" v-for="(item, index) in list" :key="index">{{ item }}</div>
      </van-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ul {
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 5px solid #ccc;
  .li {
    line-height: 100px;
  }
}
</style>
